<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin-left: 25px;
        }
        input{
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <button type="button" id="pla" style="height: 20px;width: 150px;">Player 1</button><br/>
    <button type="button" id="01" class="ql" style="height: 50px;width: 50px;" onclick="f(this.id)">&nbsp;</button><button type="button" id="02" class="ql" style="height: 50px;width: 50px;" onclick="f(this.id)">&nbsp;</button><button type="button" id="03" class="ql" style="height: 50px;width: 50px;" onclick="f(this.id)">&nbsp;</button>O是 Player 1<br/>
    <button type="button" id="04" class="ql" style="height: 50px;width: 50px;" onclick="f(this.id)">&nbsp;</button><button type="button" id="05" class="ql" style="height: 50px;width: 50px;" onclick="f(this.id)">&nbsp;</button><button type="button" id="06" class="ql" style="height: 50px;width: 50px;" onclick="f(this.id)">&nbsp;</button>X是 Player 2或电脑<br/>
    <button type="button" id="07" class="ql" style="height: 50px;width: 50px;" onclick="f(this.id)">&nbsp;</button><button type="button" id="08" class="ql" style="height: 50px;width: 50px;" onclick="f(this.id)">&nbsp;</button><button type="button" id="09" class="ql" style="height: 50px;width: 50px;" onclick="f(this.id)">&nbsp;</button><br/>
    <input type="checkbox" onclick="dn()">与电脑对玩?<br/>
<table border="1" cellpadding="1" cellspacing="1" width="30%">
    <th class="01">玩家1 胜</th>
    <th class="02">玩家2 胜</th>
    <th class="03">平局</th>
    <tr style="height: 20px">
        <td class="01" style="text-align: center">0</td>
        <td class="02" style="text-align: center">0</td>
        <td class="03" style="text-align: center">0</td>
    </tr>
</table>
</body>
</html>
<script>
    var p = document.getElementById('pla');
    var num = 0,jqr = false;
    var hs = "",c = 1;
    function f(val) {
        var v = document.getElementById(val).innerHTML;
        if (p.innerText == "Player 1" && v == "&nbsp;") {
            document.getElementById(val).innerHTML = "O";
            if (jqr==false)p.innerText = "Player 2";
            num++;
            js(num);
            if (num == 9) {
                num = 0;
                if (c==2){
                    c=1;
                    return;
                }
                var arr = document.getElementsByClassName("03");
                arr[arr.length - 1].innerHTML = parseInt(arr[arr.length - 1].innerHTML) + 1;
                hs = "";
                alert("游戏结束(5秒后清空)");
                setTimeout('qll()', 5000);
                return;
            }
            if (jqr && c==1){
                p.innerText = "robot";
                dndj();
            }
            c=1;
        } else if (jqr == false) {
            if (p.innerText == "Player 2" && v == "&nbsp;") {
                document.getElementById(val).innerHTML = "X";
                p.innerText = "Player 1";
                num++;
                if (num == 9) {
                    num = 0;
                    js(num);
                    if (c==2){
                        c=1;
                        return;
                    }
                    var arr = document.getElementsByClassName("03");
                    arr[arr.length - 1].innerHTML = parseInt(arr[arr.length - 1].innerHTML) + 1;
                    hs = "";
                    alert("游戏结束(5秒后清空)");
                    setTimeout('qll()', 5000);
                    return;
                }
                js(num);
            }
        }
    }
    function js(num) {
            var arr = document.getElementsByClassName('ql');
            o:for (var i = 0; i < arr.length; i++) {
                if (i == 0 || i == 3 || i == 7) {
                    if (arr[i].innerHTML == arr[i + 1].innerHTML && arr[i].innerHTML == arr[i + 2].innerHTML) {
                        hs = arr[i].innerHTML;
                        break o;
                    }
                    if (i == 0) {
                        if (arr[i].innerHTML == arr[i + 4].innerHTML && arr[i].innerHTML == arr[i + 8].innerHTML) {
                            hs = arr[i].innerHTML;
                            break o;
                        }
                    }
                }
                if (i == 0 || i == 1 || i == 2) {
                    if (arr[i].innerHTML == arr[i + 3].innerHTML && arr[i].innerHTML == arr[i + 6].innerHTML) {
                        hs = arr[i].innerHTML;
                        break o;
                    }
                    if (i == 2) {
                        if (arr[i].innerHTML == arr[i + 2].innerHTML && arr[i].innerHTML == arr[i + 4].innerHTML) {
                            hs = arr[i].innerHTML;
                            break o;
                        }
                    }
                }
            }
            if (hs != "" && hs != "&nbsp;") {
                if (hs == 'O') {
                    var arr = document.getElementsByClassName("01");
                    arr[arr.length - 1].innerHTML = parseInt(arr[arr.length - 1].innerHTML) + 1;
                    hs = "";
                    num = 0;
                    alert("游戏结束(5秒后清空)");
                    setTimeout('qll()', 5000);
                    c=2;
                    return;
                }
                if (hs == 'X') {
                    var arr = document.getElementsByClassName("02");
                    arr[arr.length - 1].innerHTML = parseInt(arr[arr.length - 1].innerHTML) + 1;
                    hs = "";
                    num = 0;
                    alert("游戏结束(5秒后清空)");
                    setTimeout('qll()', 5000);
                    c=2;
                    return;
                }
            }
        }
    function qll() {
            var arr = document.getElementsByClassName('ql');
            p.innerText = "Player 1";
            for (var i = 0; i < arr.length; i++) {
                arr[i].innerHTML = "&nbsp;"
            }
            num = 0;
        }
    function dn() {
      var arr = document.getElementsByClassName("02");
      if (arr[0].innerHTML=="玩家2 胜"){
          arr[0].innerHTML = '电脑 胜';
          jqr = true;
      }else {
          arr[0].innerHTML = '玩家2 胜';
          jqr = false;
      }
    }
    function dndj() {
        var arr = document.getElementsByTagName("button");
        while (true) {
            var nu = Math.floor(Math.random() * 9);
            if (p.innerText == "robot" && arr[nu].innerHTML == "&nbsp;") {
                document.getElementById(arr[nu].id).innerHTML = "X";
                p.innerText = "Player 1";
                num++;
                if (num == 9) {
                    num = 0;
                    js(num);
                    if (c==2){
                        c=1;
                        return;
                    }
                    var arr = document.getElementsByClassName("03");
                    arr[arr.length - 1].innerHTML = parseInt(arr[arr.length - 1].innerHTML) + 1;
                    hs = "";
                    alert("游戏结束(5秒后清空)");
                    setTimeout('qll()', 5000);
                    return;
                }
                js(num);
                break;
            }
        }
    }
</script>
